<!--  -->
<template>
  <div class="rate">
    <div class="tou">
      <ul class="tb">
        <!-- <li v-for="(tab, index) in tabs" :key="index"  @click="changeView(index)">{{ tab }}</li> -->
        <li v-for="(tab, index) in tabs" :key="index" @click="changeView(index)" :class="{colr:currentIndex === index}">
          {{ tab.tabss }}
          <span :class="{ active: currentIndex === index }"></span>
        </li>
      </ul>
      <div class="xuan">
        <ul class="xaunt">
          <li class="el-icon-date"></li>
          <li>全年</li>
          <li style="color: #006eff">本月</li>
        </ul>
      </div>
    </div>
    <div class="conts">
      <component :is="currentTabComponent"></component>
    </div>
  </div>
</template>
<script>
import Qproje from '@/components/admin/instr/rate/Qproje.vue'
import Discuss from '@/components/admin/instr/rate/Discuss.vue'
import Working from '@/components/admin/instr/rate/Working.vue'
export default {
  components: {
    Qproje,
    Discuss,
    Working,
  },
  data() {
    return {
      currentIndex: 0,
      arr: ['Qproje', 'Discuss', 'Working'],
      tabs: [
        { tabss: '签约项目'},
        { tabss: '开工项目'},
        { tabss: '在谈项目'},
      ],
    }
  },

  methods: {
    changeView(index) {
      this.currentIndex = index
    
      this.isFinshed = true
    },
  },
  computed: {
    currentTabComponent() {
      return this.arr[this.currentIndex]

      // return this.currentTab
    },
  },
}
</script>
<style lang='scss' scoped>
.colr{
  color: #006eff;
}
.rate {
  width: 100%;
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  background: #ffffff;
  .tou {
    margin-left: 17px;
    width: 100%;
    height: 57px;
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    border-bottom: 1px solid #fff;
    .tb{
      margin-left: 10px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      height: 57px;
      width: 50%;
      list-style: none;
      display: flex;
     color: rgba(0,0,0,0.65);
      li {
        margin: 21px 60px 12px 0;
        line-height: 24px;
        width: 64px;
        height: 24px;
        .active {
          position: relative;
          margin: 0 auto;
          top: 9px;
          display: block;
          width: 63px;
          height: 2px;
          background: #006eff;
        }
      }
    }
    .xuan {
      width: 50%;
      margin: 21px 20px 16px 0;
      height: 20px;
      .xaunt {
       
        height: 24px;
        li {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Semibold;
          font-weight: 600;
          float: right;
          width: 28px;
          height: 20px;
          margin-left: 24px;
          line-height: 20px;
          text-align: center;
        }
      }
    }
  }
  .conts{
    width: 100%;
    height: 726px;
  }
}
</style>
